{% extends 'layout/basic.html' %}
{% load static %}

{% block title %}用户注册{% endblock %}


{% block css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}">
<style>
	.error-msg{
		color: red;
		position: absolute;
		font-size: 13px;
	}
</style>
{% endblock %}


{% block content %}
	<div class="account">
		<div class="title">用户注册</div>
		<form id="regForm" method="post">
			<div class="form-group">
				<label for="exampleInputUsername">用户名</label>
				<input type="text" class="form-control" id="username" placeholder="请输入用户名">
				<span class="error-msg"></span>
			</div>
			<div class="form-group">
				<label for="exampleInputEmail1">邮箱</label>
				<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
				<span class="error-msg"></span>
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">密码</label>
				<input type="password" class="form-control" id="password" placeholder="请输入密码">
				<span class="error-msg"></span>
			</div>
			<div class="form-group">
				<label for="exampleInputPassword2">重复密码</label>
				<input type="password" class="form-control" id="password2" placeholder="请再次输入密码">
				<span class="error-msg"></span>
			</div>
			<div class="form-group">
				<label for="exampleInputmobliePhone">手机号</label>
				<input type="text" class="form-control" id="moblie_phone" placeholder="请输入手机号">
				<span class="error-msg"></span>
			</div>
			<div class="form-group">
				<label for="exampleInputCode">验证码</label>
				<div class="clearfix">
					<div class="col-md-6" style="padding-left: 0;">
						<input type="text" class="form-control" id="code" placeholder="请输入验证码">
						<span class="error-msg"></span>
					</div>
					<div class="col-md-6"><input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码"></div>
				</div>
			</div>
			<center>
			<input  id="btnSubmit" class="btn btn-primary" type="button" value="注 册" >
			</center>

		</form>
	</div>
{% endblock %}


{% block js %}
	<script>
		// 页面框架加载完成之后自动执行函数
		$(function(){
			
			bindClickBtnSms();
			bindClickSubmit();
		});
		
		/*
		点击提交（注册）
		*/
		function bindClickSubmit(){
			$('#btnSubmit').click(function(){
				
				$('.error-msg').empty();
				
				var username = $('#username').val();
				var email = $('#email').val();
				var password = $('#password').val();
				var password2 = $('#password2').val();
				var	moblie_phone = $('#moblie_phone').val();
				var code = $('#code').val();
								
				$.ajax({
					url:"{% url 'reg' %}",
					type:"POST",
					data:{
						"username":username,
						"email":email,
						"password":password,
						"password2":password2,
						"moblie_phone":moblie_phone,
						"code":code,
						"csrfmiddlewaretoken":"{{ csrf_token }}",
					},	// 所有字段数据 + csrf_token
					dataType:"JSON",
					success:function(res){
						if(res.status){
							location.href = '/login/';
						}else{
							$.each(res.error, function(key, value){
								$('#'+ key).next().text(value[0]);
							})
						}
					}
				})
			})
		}
		/*
		点击获取验证码的按钮绑定事件
		*/
	   function bindClickBtnSms(){
		 $('#btnSms').click(function(){
			 
			 $('.error-msg').empty();
			 
		 	// 获取用户输入的手机号
			// 找到输入框的ID，根据ID获取值。
			var mobliePhone = $('#moblie_phone').val();
			
			// 发送ajax请求，把手机号发送过去
			$.ajax({
				url:"{% url 'send_sms' %}",
				type: "POST",
				data: {"moblie_phone":mobliePhone,
				"tpl":"register",
				"csrfmiddlewaretoken":"{{ csrf_token }}",
				},
				dataType: 'JSON',
				success: function(res){
					if(res.status){
						sendSmsRemind();
					}else{
						$('#moblie_phone').next().text(res.error);
					}
				}
			})
		})
	}
	/* 倒计时
	*/
	function sendSmsRemind(){
		var $smsBtn = $('#btnSms');
		
		$smsBtn.prop('disabled', true);
		
		var time = 60;
		var remind = setInterval(function(){
			$smsBtn.val(time+'秒重新发送');
			time = time - 1;
			if(time < 1){
				clearInterval(remind);
				$smsBtn.val('点击获取验证码').prop('disabled', false);
			}
		}, 1000)
	}
	</script>
{% endblock %}